<template>
	<view class="pb-safe-area">
		<view class="p-4 flex flex-column grid-gap-6">
			<view class="bg-white flex flex-column grid-gap-2 rounded-4">
				<view class="flex rounded-4 p-4 flex-center grid-gap-2" hover-class="bg"
					@tap="$page.open('/pages/user/account/headimg')">
					<text class="flex-1 h9 text-grey">头像</text>
					<image class="rounded-4" :src="USERINFO.headimg" mode="" style="width: 100rpx;height: 100rpx;">
					</image>
				</view>
				<view class="flex rounded-4 p-4 flex-center grid-gap-2" hover-class="bg">
					<text class="flex-1 h9 text-grey">昵称</text>
					<input type="text" class="text-right font-weight-600 h9" placeholder="请输入昵称" v-model="form.nickname"
						:cursor="999">
				</view>
				<view class="flex rounded-4 p-4 flex-center grid-gap-2" @tap="genderShow = true;" hover-class="bg">
					<text class="flex-1 h9 text-grey">性别</text>
					<x-picker v-model:show="genderShow" v-model="form.gender" keyName="name"
						:columns="[[{ name: '男', value: 'man' }, { name: '女', value: 'woman' }]]"
						confirm-color="var(--xl-primary)" @confirm="genderConfirm">
						<text class="h9 font-weight-600" v-if="form.gender"> {{ form.gender_text }} </text>
						<text class="h9 font-weight-600" v-else> 请选择性别</text>
					</x-picker>
					<uni-icons type="right" color="var(--xl-placeholder)"></uni-icons>
				</view>
				<view class="flex rounded-4 p-4 flex-center grid-gap-2" @tap="birthdayShow = true;" hover-class="bg">
					<text class="flex-1 h9 text-grey">生日</text>
					<x-picker v-model:show="birthdayShow" v-model="form.birthday" height="50vh" :maxDate="maxDate"
						:minDate="minDate" mode="date" confirm-color="var(--xl-primary)">
						<text class="h9 font-weight-600" v-if="form.birthday"> {{ form.birthday }} </text>
						<text class="h9 font-weight-600" v-else> 选择您的生日</text>
					</x-picker>
					<uni-icons type="right" color="var(--xl-placeholder)"></uni-icons>
				</view>
				<view class="flex rounded-4 p-4 flex-center grid-gap-2" hover-class="bg"
					@tap="$page.open('/pages/user/account/bind')">
					<text class="flex-1 h9 text-grey">绑定手机号</text>
					<text class="h9 font-weight-600"> {{ USERINFO.mobile }} </text>
					<uni-icons type="right" color="var(--xl-placeholder)"></uni-icons>
				</view>
				<view class="flex rounded-4 p-4 flex-center grid-gap-2" hover-class="bg">
					<text class="flex-1 h9 text-grey">最后登录</text>
					<text class="h9 font-weight-600"> {{ USERINFO.last_login_time }} </text>
				</view>
			</view>

			<view class="flex" v-if="isEdit">
				<button class="flex-1 btn-primary btn-round" @click="submit()">保存</button>
			</view>
		</view>
		<x-loading v-if="loading" />
	</view>
</template>

<script setup lang="ts">
import { ref, nextTick, watch } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useUserStore, useRefs } from "@/stores";
import { $page, $api, $message } from "@/utils";
import { $helper } from '../../../utils';
const UserStore = useUserStore();
const { USERINFO } = useRefs(UserStore);

const date = new Date();
date.setFullYear(date.getFullYear() - 16);
const maxDate = date.getTime();
date.setFullYear(date.getFullYear() - 44);
const minDate = date.getTime();
const loading = ref(false)
const genderShow = ref(false)
const birthdayShow = ref(false)
const form = ref({
	headimg: '',
	nickname: '',
	birthday: '',
	gender: '',
	gender_text: '',
});
const isLoad = ref(false);
const isEdit = ref(false);
watch(() => form.value, () => {
	if (isLoad.value) {
		isEdit.value = true;
	}
}, { deep: true });
const submit = () => {
	uni.showLoading({ title: '保存中...' });
	$api.User.save(form.value).then((res: any) => {
		uni.hideLoading();
		$message.success(res.msg);
		setTimeout(() => {
			$page.back();
		}, 1000);
	}).catch((err: any) => {
		uni.hideLoading();
		$message.error(err.msg);
	})
}
const genderConfirm = (val: any) => {
	form.value.gender_text = val.name
}
onLoad(() => {
	form.value.nickname = USERINFO.value.nickname
	form.value.birthday = USERINFO.value.birthday
	form.value.gender = USERINFO.value.gender
	form.value.gender_text = USERINFO.value.gender_text
	nextTick(() => {
		isLoad.value = true
	})
})
</script>

<style lang="scss" scoped></style>
